<template>
	<view class="container">
		<scroll-view 
			class="scroll-Y" 
			:scroll-y="true"
			:scroll-into-view="nextView"
			:scroll-with-animation="true"
			:refresher-enabled="true" 
			:refresher-triggered="refreshing"
			refresher-default-style="none" 
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherpulling="scroll"
			@refresherrestore="isBlack=false"
			@refresherabort="isBlack=false"
			@refresherrefresh="refresh"
			@scrolltolower="reachBottom"
			@scroll="scroll"
		>
		<!-- 顶部导航栏 -->
		<view class="nav-box flex-r ac" :style="{'background': navBgColor}" :class="{'navborder': navBorder}">
			<image class="search icon" :src="!isBlack ? require('@/public/images/public/ss.png') : require('@/public/images/public/dhl_ss.png')" mode="aspectFit" @tap.stop="$goByName('search')"></image>
			<view class="signin flex-r" @tap.stop="$goByName('usersignin')">
				<image class="icon" :src="!isBlack ? require('@/public/images/index/qdb.png') : require('@/public/images/index/qdh.png')" mode="aspectFit"></image>
				<view class="note flex-r ac jc" v-if="isLogin && user && !user.signStatus"></view>
			</view>
		</view>
		<!-- 推荐banner -->
		<view class="banner" id="banner" :class="{'haveDiscuss': hotDiscuss[0]}">
			<uni-swiper-dot :info="recBanners" :current="current.banner" field="content" mode="round" :dotsStyles="dotsStyles">
				<swiper class="swiper-box" :autoplay="true" :circular="true" @change="bannerChange($event, 'banner')" @tap="goBannerDetail(current.banner)">
					<swiper-item v-for="(banner, index) in recBanners" :key="index">
						<image class="banner-img" :src="banner.imgUrl" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 热门讨论贴 -->
		<!-- <view class="discuss flex-r ac" v-if="hotDiscuss[0]">
			<image class="discuss-icon" src="@/public/images/bar/rt.png" mode="aspectFit"></image>
			<swiper class="discuss-swiper" :autoplay="true" :circular="true" :interval="3000" :vertical="true" @change="bannerChange($event, 'discuss')" @tap="goDiscussDetail(current.discuss)">
				<swiper-item v-for="(discuss, index) in hotDiscuss" :key="index">
					<view class="swiper-item flex-r ac">
						<view class="text-secondary text-hidden" :class="{'hot': index < 3}">{{discuss.title}}</view>
						<image class="hot-icon" src="@/public/images/bar/hot.png" mode="aspectFit" v-if="index < 3"></image>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- 推荐专家 -->
		<view class="expert flex-c">
			<view class="expert-head flex-r ac jsb">
				<view class="flex-r ac">
					<template v-for="(nav, index) in expertList">
						<text class="text-regular text-bold color-grey" :key="index" :class="{'active': index== current.expert}" @tap="bannerChange({detail:{current:index}}, 'expert')">
							{{nav.link.title}}
						</text>
					</template>
				</view>
				<image class="seasonrank-icon" src="@/public/images/index/lsph.png" mode="aspectFit" @tap="$goByName('seasonrank')"></image>
			</view>
			<template v-for="(nav, index) in expertList">
				<keep-alive>
					<view class="expert-body" :key="index" v-if="index == current.expert">
						<RecExpert :expertList="nav.list" :type="nav.type" :maxShow="nav.maxShow" :link="nav.link"></RecExpert>
					</view>
				</keep-alive>
			</template>
		</view>
		<!-- 推荐比赛 -->
		<view class="match flex-c" v-if="recMatchs[0]">
			<view class="match-head flex-r ac jsb">
				<text class="text-large">赛事推荐</text>
			</view>
			<swiper class="match-body" @change="bannerChange($event, 'match')" :display-multiple-items="recMatchs.length > 1 ? 2 : 1" @tap="goMatchDetail">
				<swiper-item class="swiper-item" v-for="(match, index) in recMatchs" :key="index">
					<view class="match-detail flex-c" :class="{'last': current.match+2 == recMatchs.length && recMatchs.length>2}" :data-match="index">
						<view class="match-info flex-r ac jsb" :class="{'foot': match.sportId == 1, 'basket': match.sportId == 2}">
							<view class="flex-r ac">
								<image class="sport-icon" :src="match.sportId === 1 ? require('@/public/images/index/zq2.png') : require('@/public/images/index/lq2.png')" mode="aspectFit"></image>
								<text class="text-mini color-white">{{match.competitionName}}</text>
							</view>
							<text class="text-mini color-white text-bold">{{match.articleCount || 0}}个方案</text>
							<image class="hot-icon" src="@/public/images/index/hm.png" mode="aspectFit"></image>
						</view>
						<view class="match-team flex-c thinborder">
							<view class="home-team flex-r ac">
								<image class="team-icon" :src="match.homeLogo || require('@/public/images/public/zqdu.png')" mode="aspectFit" v-if="match.sportId == 1"></image>
								<image class="team-icon" :src="match.awayLogo || require('@/public/images/public/lqdh.png')" mode="aspectFit" v-else></image>
								<text class="text-small">{{match.sportId == 1 ? match.homeNameZh : match.awayNameZh}}</text>
								<text class="text-mini color-grey">{{match.sportId == 1 ? '[主]' : '[客]'}}</text>
								<text class="text-secondary color-red" v-if="match.sportId == 1 && match.statusId > 1 && match.statusId < 9">
									{{$CHS.sumScoreFoot(match.homeScores)}}
								</text>
								<text class="text-secondary color-red" v-if="match.sportId == 2 && match.statusId > 1 && match.statusId < 11">
									{{$CHS.sumScoreBasket(match.awayScores)}}
								</text>
							</view>
							<view class="away-team flex-r ac">
								<image class="team-icon" :src="match.awayLogo || require('@/public/images/public/zqdu.png')" mode="aspectFit" v-if="match.sportId == 1"></image>
								<image class="team-icon" :src="match.homeLogo || require('@/public/images/public/lqdh.png')" mode="aspectFit" v-else></image>
								<text class="text-small">{{match.sportId == 1 ? match.awayNameZh : match.homeNameZh}}</text>
								<text class="text-mini color-grey">{{match.sportId == 1 ? '[客]' : '[主]'}}</text>
								<text class="text-secondary color-red" v-if="match.sportId == 1 && match.statusId > 1 && match.statusId < 9">
									{{$CHS.sumScoreFoot(match.awayScores)}}
								</text>
								<text class="text-secondary color-red" v-if="match.sportId == 2 && match.statusId > 1 && match.statusId < 11">
									{{$CHS.sumScoreBasket(match.homeScores)}}
								</text>
							</view>
						</view>
						<view class="match-date flex-r ac jsb pd20">
							<uni-dateformat class="text-mini color-grey" :date="match.matchTime" format="MM.dd hh:mm"></uni-dateformat>
							<text class="text-mini" :class="match.statusId > 1 && match.statusId < 8 ? 'color-blue' : 'color-grey'" v-if="match.sportId == 1">{{$CHS.getMatchFootStatus(match.statusId)}}</text>
							<text class="text-mini" :class="match.statusId > 1 && match.statusId < 10 ? 'color-blue' : 'color-grey'" v-else>{{$CHS.getMatchBasketStatus(match.statusId)}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 推荐视频 -->
		<view class="video flex-c" v-if="recVideos[0]">
			<view class="video-head flex-r ac jsb">
				<text class="text-large">视频推荐</text>
				<view class="flex-r ac" @tap="$goByName('videolist', {type: 'article'})">
					<text class="text-secondary color-grey">查看更多</text>
					<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
				</view>
			</view>
			<swiper class="video-body" @change="bannerChange($event, 'video')" :display-multiple-items="recVideos.length > 1 ? 2 : 1" @tap="goVideoDetail">
				<swiper-item  class="swiper-item" v-for="(video, index) in recVideos" :key="index">
					<view class="video-detail flex-r ac jc" :class="{'last': current.video+2 == recVideos.length && recVideos.length>2}" :data-video="index">
						<image class="thumb-img" :src="video.sportId == 1 ? require('@/public/images/public/t1-ys.jpg') : require('@/public/images/public/lqt-ys.jpg')" mode="aspectFill"></image>
						<image class="play-icon" src="@/public/images/public/bfj.png" mode="widthFix"></image>
						<view class="title-box flex-r ac">
							<view class="expert-avatar flex-r ac jc">
								<lazy-image class="image border-round" :src="video.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
							</view>
							<view class="text-small color-white text-hidden">{{video.title}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 方案推荐 -->
		<view class="article flex-c">
			<view class="article-head flex-r ac">
				<view class="article-head-left flex-r ac">
					<text class="text-regular color-grey text-bold" v-for="(nav, index) in articleList" :key="index" :class="{'active': index == current.article}" @tap="bannerChange({detail:{current:index}}, 'article')">{{nav.title}}</text>
				</view>
				<view class="article-head-right flex-r ac" @tap="$goByName('reclist', {tabCur: current.article})">
					<text class="text-secondary color-grey">查看更多</text>
					<image class="right-icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
				</view>
			</view>
			<template v-for="(nav, index) in articleList">
				<keep-alive>
					<view class="article-body" :key="index" v-if="index == current.article">
						<ArticleMixin v-if="articleList[index].list[0]" :list="articleList[index].list"></ArticleMixin>
						<EmptyContent v-else top="160rpx" text="暂无更新的方案" img="qsy_zwxl" @refresh="getArticleList"></EmptyContent>
						<view class="list-end flex-r mb20" v-if="articleList[index].isEnd && articleList[index].list[0]">
							<text>已经到底啦～</text>
						</view>
					</view>
				</keep-alive>
			</template>
		</view>
		</scroll-view>
		<!-- APP下载引导 -->
		<AppDown v-if="platform!='ios'"></AppDown>
		<!-- 首页弹窗 -->
		<DiaLoag ref="dialog" :type="dialogType" :popupData="dialogData" @close="getOtherPopup"></DiaLoag>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nextView: '', //ScrollView滚动ID
				scrollTop: 0, //滚动距离
				refreshing: false, //刷新状态
				
				navBgColor: 'rgba(0,0,0,0)', //导航栏背景色
				isBlack: false, //导航栏文字颜色变黑
				navBorder: false, //导航栏底部边框
				
				recBanners: [], //推荐banner
				recMatchs: [], //推荐比赛
				recVideos: [], //推荐视频
				current: {banner: 0, discuss: 0, expert: 0, match: 0, video: 0, article: 0}, //banner、比赛等当前索引
				dotsStyles: { //banner style
					backgroundColor: '#fff',
					selectedBackgroundColor: '#fff',
					border: "none",
					selectedBorder: "none"
				},
				hotDiscuss: [], //热帖列表
				
				expertList: [{ //推荐专家、连红推荐、周人气榜
					type: 'rec', link: { title: '推荐专家' }, maxShow: 10, list: []
				},{
					type: 'red', link: { title: '连红推荐', name: 'experts', params: {navTab: 'continuousRed'} }, maxShow: 9, list: []
				},{
					type: 'hits', link: { title: '周人气榜', name: 'experts', params: {navTab: 'popularity'} }, maxShow: 9, list: []
				}],
				articleList: [{//首页方案
					title: '全部', list: [], isEnd: false, pageNo: 1
				},{
					title: '免费方案', list: [], isEnd: false, pageNo: 1
				},{
					title: '足球', list: [], isEnd: false, pageNo: 1
				},{
					title: '篮球', list: [], isEnd: false, pageNo: 1
				}],

				dialogType: null, //弹窗类型
				dialogData: null //弹窗数据
			}
		},
		components: {
			RecExpert: () => import("./components/ch-expert/ch-recexpert.vue"), //推荐专家
			ArticleMixin: () => import("./components/ch-article/ch-articlelistmixin.vue"), //推荐方案
			DiaLoag: () => import("./components/ch-dialog/ch-showdialog.vue") //弹窗
		},
		computed: {
			isLogin() {
				return this.$store.state.isLogin
			},
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			//查询首页数据
			this.getRecBanners(); //推荐banner
			this.getExpertList(); //推荐专家
			this.getArticleList(); //推荐料
			this.getRecMatchs(); //推荐比赛
			this.getRecVideos(); //推荐视频
			this.getHotDiscuss(); //推荐热帖
		},
		onReady() {
			if(this.isLogin && this.user.isFirstRegistration !== true){
				setTimeout(()=>{
					//正常登录弹窗
					this.$refs.dialog.showHomePopup();
				}, 0)
			}
		},
		onTabItemTap() {//双击tabbar回到顶部
			if(this.tabClick) { // 500ms 内再次点击
				//重置状态
				this.nextView = 'banner'
				this.$nextTick(()=>{
					this.nextView = ''
				})
			}
			this.tabClick = true
			setTimeout(() => {
				this.tabClick = false // 500ms 内没有第二次点击，就当作单击
			}, 500)
		},
		methods: {
			//滑动监听，处理顶部背景色
			scroll(e) {
				if(e.type == 'refresherpulling'){
					this.scrollTop = 0 - e.detail.deltaY
				}else{
					this.scrollTop = e.detail.scrollTop
				}
				if(!this.timeout){
					this.timeout = setTimeout(()=>{
						this.timeout = null
						this.setNavBgColor()
					}, 100)
				}
			},
			//顶部下拉刷新
			refresh() {
				this.refreshing = true
				this.articleList[this.current.article].pageNo = 1
				this.getRecBanners()
				this.getExpertList()
				this.getArticleList()
				this.getRecMatchs()
				this.getRecVideos()
				this.getHotDiscuss()
				setTimeout(() => {
					this.refreshing = false
					this.scrollTop = 0
					this.setNavBgColor()
				}, 800)
			},
			//滑动触底加载
			reachBottom() {
				if(!this.articleList[this.current.article].isEnd){
					this.getArticleList()
				}
			},
			//banner切换通知
			bannerChange(e, type) {
				let index = e.detail.current
				this.current[type] = index;
				if(type == 'expert' && this.expertList[index].list.length == 0){
					this.getExpertList(index)
				}else if(type == 'article' && this.articleList[index].list.length == 0){
					this.getArticleList()
				}
			},
			//查询推荐banner
			getRecBanners() {
				this.$http.get({
					url: '/api/appUser/queryBannerRows',
					data: {
						pageNo: 1,
						pageSize: 6
					}
				}).then(data => {
					console.log('Banner', data);
					if(data.success){
						if(data.result && data.result.records){
							this.recBanners = data.result.records
						}else{
							this.recBanners = []
						}
					}else{
						uni.showToast({
							title: data.message || '加载失败，请下拉刷新重试',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//获取热帖列表
			getHotDiscuss() {
				this.$http.get({
					url: '/api/user/home/topic'
				}).then(data => {
					console.log('Discuss', data);
					if(data.success && data.result){
						this.hotDiscuss = data.result
					}else{
						this.hotDiscuss = []
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			//获取专家列表
			getExpertList(index = 0) {
				if(index == 0){
					this.getRecExperts(index);
				}else if(index == 1){
					this.getContinuityExperts(index);
				}else if(index == 2){
					this.getVarietyExperts(index);
				}
			},
			//查询推荐专家
			getRecExperts(index) {
				this.$http.get({
					url: '/api/appUser/queryRecommendExpertRows',
					data: {
						pageNo: 1,
						pageSize: 10
					}
				}).then(data => {
					console.log('Rec',data);
					if(data.success && data.result){
						this.expertList[index].list = data.result.records
						//加载新用户首次登录弹窗
						if(this.isLogin && this.user.isFirstRegistration === true){
							setTimeout(()=>{
								//首次登录弹窗
								this.$refs.dialog.showNewUserPopup(data.result.records)
							}, 0)
						}
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//新连红专家
			getContinuityExperts(index) {
				this.$http.get({
					url: '/api/appUser/queryExpertRedRankRows'
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.expertList[index].list = data.result
					}
				}).catch((err) => {
					console.log(err);
					if(err.statusCode == 401){
						this.$CHS.goUserLogin();
					}
				})
			},
			//人气推荐
			getVarietyExperts(index) {
				this.$http.get({
					url: '/api/appUser/expert/softHits',
					data: {
						variety: 'softHits',
						pageNo: 1,
						pageSize: 10
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.expertList[index].list = data.result.records
					}
				}).catch((err) => {
					console.log(err);
					if(err.statusCode == 401){
						this.$CHS.goUserLogin();
					}
				})
			},
			//查询推荐比赛
			getRecMatchs() {
				this.$http.get({
					url: '/api/appUser/queryRecommendMatchRows',
					data: {
						pageNo: 1,
						pageSize: 6
					}
				}).then(data => {
					console.log('match',data);
					if(data.result && data.result.records){
						this.recMatchs = data.result.records
					}else{
						this.recMatchs = []
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询推荐视频
			getRecVideos() {
				this.$http.get({
					url: '/api/user/home/recommended/video/article',
					data: {
						pageNo: 1,
						pageSize: 6
					}
				}).then(data => {
					console.log('video',data);
					if(data.result && data.result.records){
						this.recVideos = data.result.records
					}else{
						this.recVideos = []
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询推荐料
			getArticleList() {
				let index = this.current.article
				this.$http.post({
					url: index != 1 ? '/api/user/article/recommendV' : '/api/user/article/recommend/free',
					data: {
						enablePay: index != 1 ? 1 : 2,
						finish: 2,
						pageNo: this.articleList[index].pageNo,
						pageSize: 15,
						sportId: index > 1 ? index - 1 : null
					},
				}).then(data => {
					console.log(data,"=====推荐方案");
					if(data.success) {
						if(data.result && data.result.total){
							if(data.result.current == 1){
								this.$set(this.articleList[index], 'list', data.result.records);
							}else{
								this.articleList[index].list.push(...data.result.records);
							}
							//更新结束状态
							this.articleList[index].isEnd = data.result.current >= data.result.pages
							//更新页数
							this.articleList[index].pageNo = data.result.current + 1
						}
					}else{
						uni.showToast({
							title: '数据加载异常，请稍后重试',
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err,'----');
				})
			},
			//新用户弹窗数据查询
			async getNewUserPopup() {
				let nextPopup = true
				try{
					let res = await this.$http.get({
						url: '/api/forum/list',
						data: {
							pageNo: 1,
							pageSize: 4
						}
					})
					if(res && res.success){
						if(res.result && res.result.total){
							this.dialogType = 'recommend'
							this.dialogData = {
								ballbar: res.result.records,
								expert: this.expertList[0].list
							}
							nextPopup = false
						}
					}
				}catch(e){
					console.log(e);
				}
				//数据异常时加载其他弹窗
				if(nextPopup){
					this.getOtherPopup('recommend')
				}
			},
			//查询首页主要弹窗
			async getHomePopup() {
				if(this.isLogin){
					let nextPopup = true
					let special = sessionStorage.getItem('specialCode')
					let today = this.$CHS.getNowDate()
					let popup = uni.getStorageSync('popup') || '{}'
					popup = JSON.parse(popup)
					// h5 免单券
					if( special ){
						try{
							let res = await this.$http.get({
								url: '/api/appUser/querySpecialUserReceiveCoupon',
								data: {
									userId: this.user.userId,
									userType: special
								}
							})
							if(res && res.success){
								if(res.result && res.result[0]){
									this.dialogType = 'coupon'
									this.dialogData = res.result
									nextPopup = false
								}else{
									sessionStorage.removeItem('specialCode')
								}
							}
						}catch(err){
							console.log(err);
						}
					}
					// h5 一折券
					if(nextPopup && (!popup.coupon || popup.coupon.today != today || popup.coupon.userId != this.user.userId)){
						try{
							let res = await this.$http.get({
								url: '/api/appUser/queryUserReceiveCoupon',
								data: {
									userId: this.user.userId
								}
							})
							if(res && res.success){
								if(res.result && res.result[0]){
									this.dialogType = 'discount'
									this.dialogData = res.result
									nextPopup = false
									popup.coupon = { today, userId: this.user.userId }
									uni.setStorageSync('popup', JSON.stringify(popup))
								}
							}
						}catch(err){
							console.log(err);
						}
					}
					if(nextPopup) {
						try{
							let res = await this.getCouponPopup()
							if(res && res.success && res.result){
								this.dialogType = 'receive'
								this.dialogData = res.result
								nextPopup = false
							}
						}catch(err){
							console.log(err);
						}
					}
					//其他弹窗
					if(nextPopup){
						this.getOtherPopup('receive')
					}
				}
			},
			//首页其他广告弹窗
			async getOtherPopup(type) {
				console.log(type);
				this.dialogType = null
				this.dialogData = null
				if(this.isLogin && type && type != 'discuss'){
					if(type == 'recommend'){
						try{
							let res = await this.getCouponPopup()
							if(res && res.success && res.result){
								this.dialogType = 'receive'
								this.dialogData = res.result
							}else{
								this.$store.commit('UPDATE_USERINFO', { isFirstRegistration: false });
							}
						}catch(err){
							console.log(err);
						}
					}else{
						let nextPopup = true
						let today = this.$CHS.getNowDate()
						let popup = uni.getStorageSync('popup') || '{}'
						popup = JSON.parse(popup)
						if(type == 'receive') {
							//排行榜弹窗
							if(!popup.rank || popup.rank.today != today || popup.rank.userId != this.user.userId){
								try{
									let res = await this.$http.get({
										url: '/api/user/home/expertRankRows'
									})
									if(res && res.success && res.result){
										if(res.result.sevenDays && res.result.sevenDays[0]){
											this.dialogType = 'rank'
											this.dialogData = res.result
											nextPopup = false
											popup.rank = { today, userId: this.user.userId }
											uni.setStorageSync('popup', JSON.stringify(popup))
										}
									}
								}catch(err){
									console.log(err);
								}
							}
						}
						if(type == 'rank' || (nextPopup && type != 'ads')){
							try{
								let res = await this.$http.get({
									url: '/api/appUser/queryHomePagePopup'
								})
								if(res && res.success){
									if(res.result){
										this.dialogType = 'ads'
										this.dialogData = res.result
										nextPopup = false
									}
								}
							}catch(err){
								console.log(err);
							}
						}
						if((type == 'ads' || nextPopup) && (!popup.discuss || popup.discuss.today != today || popup.discuss.userId != this.user.userId)){
							try{
								let res = await this.$http.get({
									url: '/api/user/home/recommended/post',
									data: {
										num: 0
									}
								})
								if(res && res.success){
									if(res.result){
										this.dialogType = 'discuss'
										this.dialogData = res.result
										
										popup.discuss = { today, userId: this.user.userId }
										uni.setStorageSync('popup', JSON.stringify(popup))
									}
								}
							}catch(err){
								console.log(err);
							}
						}
					}
				}
			},
			//未领取优惠券弹窗
			getCouponPopup() {
				console.log('领取优惠劵')
				return new Promise((resolve, reject) => {
					this.$http.get({
						url: '/api/appUser/coupon/popup'
					}).then(res => {
						console.log('coupon', res);
						resolve(res)
					}).catch((err)=>{
						reject(err)
					})
				})
			},
			//进入签到
			goSignIn(){
				let signTimes = this.user.signTimes
				let signStatus = this.user.signStatus
				this.$Router.push({ name: 'usersignin', params: {signTimes, signStatus}})
			},
			//打开轮播图详情
			goBannerDetail(index) {
				if(this.recBanners[index]){
					let banner = this.recBanners[index]
					switch (banner.type){
						case 1:
							if(banner.redirectUrl){//打开外部链接
								let params = {src: banner.redirectUrl}
								this.$goByName('webview', params)
							}
							break;
						case 2:
							if(banner.sourceId){//打开专家主页
								this.$CHS.goExpertHome(banner.sourceId)
							}
							break;
						case 3:
							if(banner.sourceId){//打开料详情
								this.$CHS.goArticleDetail(banner.sourceId)
							}
							break;
						case 4:
							if(banner.title == 'new_award'){//跳转活动页面
								this.$goByName('receivecoupon')
							}else if(banner.title == 'welfare_zc'){
								this.$goByName('benefitslist')
							}else if(banner.title == 'recharge'){
								this.$CHS.goRecharge()
							}
							break;
						case 5:
							if(banner.sourceId){//打开球吧
								this.$CHS.goBarHome(banner.sourceId)
							}
							break;
						case 6:
							if(banner.sourceId){//打开比赛详情
								this.$CHS.goMatchDetail({matchId: banner.sourceId, sportId: banner.redirectUrl});
							}
							break;
						default:
							break;
					}
				}
			},
			//打开热帖详情
			goDiscussDetail(index) {
				if(this.hotDiscuss[index]){
					let discuss = this.hotDiscuss[index]
					if(discuss.type == 6 || discuss.type == 7){
						this.$CHS.goDiscussDetail(discuss.id)
					}
				}
			},
			//进入比赛详情
			goMatchDetail(e) {
				if(typeof e.target.dataset.match != 'undefined'){
					let index = e.target.dataset.match
					this.$CHS.goMatchDetail({matchId: this.recMatchs[index].matchId, sportId: this.recMatchs[index].sportId});
				}
			},
			//打开视频料详情
			goVideoDetail(e) {
				if(typeof e.target.dataset.video != 'undefined'){
					let article = this.recVideos[e.target.dataset.video]
					let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType || 'expert'}
					this.$CHS.goArticleDetail(article.id, params)
				}
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				if(scrollTop > 100){
					this.navBorder = true
				}else{
					this.navBorder = false
				}
				switch (true){
					case scrollTop < -40:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = true
						this.navBorder = false
						break;
					case scrollTop < 10:
						this.navBgColor = 'linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%)';
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%)';
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = false
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = false
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.scroll-Y{
			height: calc(var(--safe-height) - #{$tabbar-height});
		}
		.text-large{
			font-size: 32rpx;
			font-weight: bold;
		}
			
		.nav-box{
			max-width: $max-width;
			margin: $pc-margin;
			height: 88rpx;
			justify-content: flex-end;
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			pointer-events: none;
			z-index: 10;
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
			.search{
				pointer-events: auto;
				padding: 20rpx 15rpx 20rpx 20rpx;
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
			}
			.signin{
				pointer-events: auto;
				position: relative;
				padding: 20rpx 20rpx 20rpx 15rpx;
				.note{
					position: absolute;
					top: 15rpx;
					right: 15rpx;
					background-color: $uni-primary;
					border-radius: 50%;
					padding: 10rpx;
				}
			}
		}
		.banner{
			max-width: $max-width;
			margin: $pc-margin;
			.swiper-box {
				margin-top: -40rpx;
				width: 100%;
				height: 320rpx;
				.banner-img{
					width: 100%;
					height: 320rpx;
				}
			}
			/deep/ .uni-swiper__dots-box{
				bottom: 30rpx !important;
			}
			&.haveDiscuss{
				/deep/ .uni-swiper__dots-box{
					bottom: 60rpx !important;
				}
			}
		}
		.discuss{
			position: relative;
			margin: -40rpx 19rpx 0;
			width: 710rpx;
			height: 80rpx;
			border-radius: 10rpx;
			.discuss-icon{
				width: 81rpx;
				height: 80rpx;
				margin: 0 20rpx 0 10rpx;
			}
			.discuss-swiper{
				width: 580rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				.swiper-item{
					width: 100%;
					height: 80rpx;
					.text-hidden{
						max-width: 580rpx;
						line-height: 1.5;
						word-break: break-all;
						&.hot{
							max-width: 496rpx;
						}
					}
					.hot-icon{
						margin-left: 20rpx;
						width: 64rpx;
						height: 24rpx;
					}
				}
			}
		}
		.discuss::before{
			content: "";
			background: #FFFFFF;
			border-radius: 10rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.expert{
			margin: 0 20rpx;
			.expert-head{
				margin: 30rpx 0 20rpx;
				.text-regular{
					margin-right: 40rpx;
					&.active{
						font-size: 32rpx;
						color: #333333;
					}
				}
				.text-regular:last-child{
					margin-right: 0;
				}
				.seasonrank-icon{
					width: 168rpx;
					height: 40rpx;
				}
			}
			.expert-body{
				width: 710rpx;
				//height: 392rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
			}
		}
		.match{
			.match-head{
				margin: 30rpx 20rpx 0;
			}
			.match-body{
				margin-top: 20rpx;
				width: 100%;
				height: 213rpx;
				.match-detail{
					margin-left: 20rpx;
					width: 355rpx;
					height: 213rpx;
					border-radius: 10rpx;
					&.last{
						margin-left: 0;
					}
					.match-info{
						pointer-events: none;
						width: 100%;
						height: 40rpx;
						box-sizing: border-box;
						border-radius: 10rpx 10rpx 0rpx 0rpx;
						position: relative;
						.sport-icon{
							margin: 0 10rpx;
							width: 28rpx;
							height: 28rpx;
						}
						.text-bold{
							margin-right: 60rpx;
						}
						&.foot{
							background: #F23030;
						}
						&.basket{
							background: #0055FF;
						}
						.hot-icon{
							position: absolute;
							width: 48rpx;
							height: 76rpx;
							right: 0;
							bottom: 0;
						}
					}
					.match-team{
						pointer-events: none;
						padding: 20rpx;
						height: 132rpx;
						width: 100%;
						box-sizing: border-box;
						background-color: #fff;
						.away-team{
							margin-top: 20rpx;
						}
						.team-icon{
							width: 36rpx;
							height: 36rpx;
							background: #FFFFFF;
							border: 1px solid #CCCCCC;
							border-radius: 50%;
							box-sizing: border-box;
							padding: 2rpx;
						}
						.text-small{
							margin: 0 9rpx 0 18rpx;
							max-width: 200rpx;
						}
						.text-mini{
							flex: 2;
							margin-right: 10rpx;
						}
					}
					.match-date{
						pointer-events: none;
						height: 40rpx;
						width: 100%;
						box-sizing: border-box;
						background-color: #fff;
					}
				}
				/deep/ .uni-swiper-wrapper{
					overflow: unset;
					.swiper-item{
						overflow: unset;
					}
				}
			}
		}
		.video{
			.video-head{
				margin: 30rpx 20rpx 0;
				.right-icon{
					width: 24rpx;
					height: 26rpx;
				}
			}
			.video-body{
				margin-top: 20rpx;
				width: 100%;
				height: 202rpx;
				.video-detail{
					position: relative;
					margin-left: 20rpx;
					width: 355rpx;
					height: 202rpx;
					border-radius: 10rpx;
					&.last{
						margin-left: 0;
					}
					.thumb-img{
						pointer-events: none;
						width: 100%;
						height: 202rpx;
						border-radius: 10rpx;
					}
					.play-icon{
						pointer-events: none;
						width: 72rpx;
						height: 72rpx;
						position: absolute;
					}
					.title-box{
						pointer-events: none;
						position: absolute;
						width: 100%;
						height: 60rpx;
						bottom: 0;
						left: 0;
						padding: 0 20rpx;
						box-sizing: border-box;
						background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 100%);
						border-radius: 0rpx 0rpx 10rpx 10rpx;
						.expert-avatar{
							width: 36rpx;
							height: 36rpx;
							border: 2rpx solid #fff;
							box-sizing: border-box;
							background-color: #FFFFFF;
							border-radius: 50%;
							margin-right: 20rpx;
							.image{
								width: 32rpx;
								height: 32rpx;
							}
						}
						.text-small{
							font-weight: 500;
						}
					}
				}
			}
		}
		.article{
			margin: 30rpx 20rpx 0;
			.article-head{
				justify-content: space-between;
				.article-head-left{
					.text-regular{
						margin-right: 40rpx;
					}
					.text-regular:last-child{
						margin-right: 0;
					}
					.active{
						font-size: 32rpx;
						color: #333333;
					}
				}
				.article-head-right{
					.text-secondary{
						margin-right: 10rpx;
					}
					.right-icon{
						width: 24rpx;
						height: 26rpx;
					}
				}
			}
		}
	}
</style>
